<template>
	<div>
		<h1>登录模块</h1>
		{{$store.state.login.username}}
		<!-- 访问模化块中的共享数据不需要加模块前缀 -->
		{{$store.getters.showName}}---{{showName}}
		<!-- 访问模块化中的getter计算属性 -->
		{{$store.getters['login/showName']}}-----{{loginShowName}}
		<p>第二种方法访问vuex中的共享数据：{{count}}</p>
		<p>第二种方法访问vuex中的模块化数据：{{username}}</p>
		<button @click="dj">调用test方法</button>
		<button @click="loginTest">调用test方法测试</button>
	</div>
	<!-- 访问vuex模块中的共享数据
	 $store.state.模块名称.数据名-->

</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
	//导入vuex的mapState
	export default {
		date(){
			return
		},
		computed:{
			...mapState({
				count:state=>state.count,
				username:state=>state.login.username
			}),
			...mapGetters({
				showName:'showName',
				loginShowName:'login/showName'
			})
		},
		methods:{
			dj(){
				//调用指定模块中的方法
				this.$store.commit('login/test')
			},
			//使用第二种方法调用login模块中的mutats中的方法
			...mapMutations({
				test:'test',
				loginTest:'login/test'
			})
		}
	}
</script>

<style>
</style>